<script setup>
import { Icon } from '@iconify/vue';
import dayjs from 'dayjs';
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { setMsgStatus, getSystemMsg } from '@/api/user'
import { showToast } from 'vant';
const router = useRouter()
const route = useRoute()
const titleNames = ref([
	{ id: 1, title: " 系统通知" },
	{ id: 2, title: "钱包通知" },
	{ id: 3, title: "直播通知" },
	{ id: 4, title: "抖音小助手" }
])
const type = ref("")
const msgList = ref(([]))

const onClickLeft = () => {
	router.back()
}
const onClickRight = () => {
	showToast("未实现")
}
const loadGetMsg = async () => {
	const res = await getSystemMsg({ page: 1, pageSize: 100, type: route.query.type })
	msgList.value = res.data.records
	type.value = route.query.type
}
loadGetMsg()


onUnmounted(async () => {
	console.log(type.value)
	await setMsgStatus({ type: type.value })
})
</script>

<template>
	<!-- 导航栏 -->
	<van-nav-bar :style="{ background: '#151724' }" left-arrow fixed @click-right="onClickRight"
		@click-left="onClickLeft">
		<template #title>
			<span style="color:#d8d9db">{{ titleNames.find(i => i.id == route.query.type).title }}</span>
		</template>
		<template #right>
			通知设置
		</template>
	</van-nav-bar>
	<!-- 主体内容 -->
	<div class="main bg-[#151724] pt-[56px] px-[20px] pb-[40px]">
		<div class="text-center text-[#bababb]">暂时没有更多了</div>
		<div class="bg-[#1c1e2b] rounded-[8px] p-[15px] mt-[30px] " v-for="item in msgList" :key="item.id">
			<div class="text-[18px]">{{ item.title }}</div>
			<div class="text-[#88898d] text-[12px] mt-[5px]">{{ dayjs(item.createdTime).format("YYYY-MM-DD HH:mm") }}</div>
			<div class="text-[13px] mt-[10px]">{{ item.content }}
			</div>
			<van-divider :style="{ borderColor: '#2a2936' }" />
			<div class="flex justify-between items-center text-[#bababb]" @click="onClickRight">
				<span>查看详情</span>
				<van-icon name="arrow" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.main {
	min-height: calc(100vh);
}

.scroll-container {
	display: flex;
	gap: 20px;
	height: 100px;
	overflow-x: scroll;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}
</style>
